<script lang="ts" setup>
  import { UserOutlined } from '@ant-design/icons-vue';
  import Tooltip from '@sscd/tooltip';
  import Divider from '@sscd/divider';
  import Avatar from '@sscd/avatar';
</script>

<template>
  <div class="demo">
    <div class="demo-title">Avatar.Group</div>
    <div class="demo-content">
      <Avatar.Group>
        <Avatar src="https://joeschmoe.io/api/v1/random" />
        <Avatar style="background-color: #f56a00">K</Avatar>
        <Tooltip title="Ant User" placement="top">
          <Avatar style="background-color: #87d068">
            <template #icon><UserOutlined /></template>
          </Avatar>
        </Tooltip>
        <Avatar style="background-color: #1890ff">
          <template #icon><UserOutlined /></template>
        </Avatar>
      </Avatar.Group>
      <Divider />
      <Avatar.Group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
        <Avatar src="https://joeschmoe.io/api/v1/random" />
        <Avatar style="background-color: #1890ff">K</Avatar>
        <Tooltip title="Ant User" placement="top">
          <Avatar style="background-color: #87d068">
            <template #icon><UserOutlined /></template>
          </Avatar>
        </Tooltip>
        <Avatar style="background-color: #1890ff">
          <template #icon><UserOutlined /></template>
        </Avatar>
      </Avatar.Group>
      <Divider />
      <Avatar.Group
        :max-count="2"
        size="large"
        :max-style="{
          color: '#f56a00',
          backgroundColor: '#fde3cf',
        }"
      >
        <Avatar src="https://joeschmoe.io/api/v1/random" />
        <Avatar style="background-color: #1890ff">K</Avatar>
        <Tooltip title="Ant User" placement="top">
          <Avatar style="background-color: #87d068">
            <template #icon><UserOutlined /></template>
          </Avatar>
        </Tooltip>
        <Avatar style="background-color: #1890ff">
          <template #icon><UserOutlined /></template>
        </Avatar>
      </Avatar.Group>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .ant-avatar {
    margin-right: 12px;
  }
</style>
